<template>
  <div class="app-container">
  <!-- 头部 -->
  <div class="ProductionDynamicHeader">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findData" />
  </div>

  <!-- 主体 -->
  <div class="Main">
    <!-- 左 -->
    <el-card class="MainLeft" shadow="always" :body-style="{ padding: '5' }">
      <h1 class="MainH1">指令主副料配套查询</h1>
      <Table :tableData="tableData" :tableHeader="tableHeader" :selection="false" :TableHeight="'270rem'" />
    </el-card>

    <!-- 右 -->
    <el-card class="MainLeftCard" shadow="always" :body-style="{ padding: '5' }">
      <!-- 头 -->
      <div class="MainRightHeader">
        <!-- card body -->
        <h1 class="MainH1">指令材料明细</h1>
        <div class="MainRightHeaderDiv">
          <Table :tableData="tableData2" :tableHeader="tableHeader2" :selection="false" :TableHeight="55" />
        </div>

        <div>
          <Table :tableData="tableData1" :tableHeader="tableHeader1" :selection="false" :TableHeight="'101rem'" />
        </div>

        <div class="MainRightInput">
          <el-form-item style="margin-left: 23px;font-size: 9px;height: 15px;" label="物料编码">
            <el-input placeholder=" " class="MainRightMainPoInput" />
          </el-form-item>

          <el-form-item style="margin-left: 23px;font-size: 9px;height: 15px;" label="订单交期">
            <el-input placeholder=" " class="MainRightMainPoInput" />
          </el-form-item>
        </div>
      </div>

      <!-- 体 -->
      <div class="MainRightMain">
        <div class="timeline">
          <div class="timeline-dot"></div>
          <h1 class="MainH1 timelineH1">冲裁</h1>
          <div class="timeline-dot"></div>
          <h1 class="MainH1 timelineH1">工艺</h1>
          <div class="timeline-dot"></div>
          <h1 class="MainH1 timelineH1">配套</h1>
          <div class="timeline-dot"></div>
          <h1 class="MainH1 timelineH1">针车</h1>
          <div class="timeline-dot"></div>
          <h1 class="MainH1 timelineH1">大底</h1>
          <div class="timeline-dot"></div>
        </div>
        <div class="timelineMain">
          <p class="timelineMainP">
          <h6 class="timelineMainH1">组别</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">欠数</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">计划</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">实际</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">欠数</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">计划</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">实际</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

        </div>

        <div class="timelineMain timelineMainThree">
          <p class="timelineMainP">
          <h6 class="timelineMainH1">组别</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">欠数</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">计划</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">实际</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">组别</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">欠数</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">计划</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

        </div>

        <div class="timelineMain timelineMainThree">
          <p class="timelineMainP">
          <h6 class="timelineMainH1">实际</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">欠数</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">计划</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">实际</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">组别</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">欠数</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">计划</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

          <p class="timelineMainP">
          <h6 class="timelineMainH1">实际</h6>
          <el-input placeholder=" " class="timelineMainInput" />
          </p>

        </div>
      </div>

      <div class="MainRightBottom">
        <h1 class="MainH1">查询条件</h1>
        <div>
          <Table :tableData="tableData3" :tableHeader="tableHeader3" :selection="false" :TableHeight="'60rem'" />
        </div>

        <div class="MainRightBottomBtn">
          <el-button style="background-color: #E7E7E7;width: 60px;color: #000000;border: none;" type="info"
            size="small">保存</el-button>
          <el-button style="background-color: #F89027;width: 60px;" type="warning" size="small">打印</el-button>
        </div>
      </div>
    </el-card>
  </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'InstructionDynamicAnalysis'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入品牌',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入订单单号',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '交期',
  },
  {
    type: 'date',
    dateLabel: '下单日期',
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材质',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '厂商',
    selectLabel: '',
    selectOptions: [{
      optionKey: '1',
      optionValue: '111111',
      optionLabel: 'option1'
    },
    {
      optionKey: '2',
      optionValue: '222222',
      optionLabel: 'option2'
    },
    {
      optionKey: '3',
      optionValue: '333333',
      optionLabel: 'option3'
    }],
  },
  {
    type: 'checkbox',
    checkboxLabel: '一裁',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '二裁',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '三裁',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '全部',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '置空', bgColor: '#1890FF',
  },
  {
    type: 'button',
    checkboxLabel: '置空', bgColor: '#1890FF',
  },
  {
    type: 'button',
    checkboxLabel: '导出',
  },
])

const findData = (data: any) => {
  console.log(data)
}

// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },

]

const tableHeader = ref([
  {
    label: '指令',
    prop: 'customer',
  },
  {
    label: '订单量',
    prop: 'instruction',
  },
  {
    label: '预补量',
    prop: 'shape',
  },
  {
    label: '一裁',
    prop: 'shape',
  },
  {
    label: '二裁',
    prop: 'shape',
  },
  {
    label: '三裁',
    prop: 'shape',
  },
])

// 表格数据
const tableData2 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
]

const tableHeader2 = ref([
  {
    label: '客户',
    prop: 'customer',
  },
  {
    label: '型体',
    prop: 'instruction',
  },
  {
    label: '颜色',
    prop: 'shape',
  },
  {
    label: '新旧款',
    prop: 'shape',
  },
  {
    label: '冲刀',
    prop: 'shape',
  },
  {
    label: '楦头',
    prop: 'shape',
  },
  {
    label: '大底',
    prop: 'shape',
  },
  {
    label: '大底厂商',
    prop: 'shape',
  },
  {
    label: '下单日',
    prop: 'shape',
  },
  {
    label: '交期',
    prop: 'shape',
  },
])

// 表格数据
const tableData3 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
    customer: 'jzyNB',
    checkboxArrange: true,
    type: 'checkbox',
    prop: 'checkboxArrange',
  },

]

const tableHeader3 = ref([
  {
    label: '补料单号',
    prop: 'customer',
  },
  {
    label: '补料日期',
    prop: 'instruction',
  },
  {
    label: '补料部门',
    prop: 'shape',
  },
  {
    label: '开补数',
    prop: 'shape',
  },
  {
    label: '原材料',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '完成日期',
    prop: 'shape',
  },
  {
    label: '冲裁',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '完成日期',
    prop: 'shape',
  },
  {
    label: '工艺',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '完成日期',
    prop: 'shape',
  },
  {
    label: '配套',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '完成日期',
    prop: 'shape',
  },
  {
    label: '针车',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '完成日期',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '大底',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '完成日期',
  },
  {
    label: '成型',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '完成日期',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
])

// 表格数据
const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
]

const tableHeader1 = ref([
  {
    label: '指令',
    prop: 'customer',
  },
  {
    label: '型体',
    prop: 'instruction',
  },
  {
    label: '材料颜色',
    prop: 'shape',
  },
  {
    label: '材料名称',
    prop: 'shape',
  },
  {
    label: '规格',
    prop: 'shape',
  },
  {
    label: '单位',
    prop: 'shape',
  },
  {
    label: '裁次',
    prop: 'shape',
  },
  {
    label: '厂商',
    prop: 'shape',
  },
  {
    label: '采购交期',
    prop: 'shape',
  },
  {
    label: '用量',
    prop: 'shape',
  },
  {
    label: '订单量',
    prop: 'shape',
  },
  {
    label: '入库量',
    prop: 'shape',
  },
  {
    label: '次数',
    prop: 'shape',
  },
  {
    label: '尾数处理',
    prop: 'shape',
  },
  {
    label: '通用',
    prop: 'shape',
  },
])
</script>

<style lang="less" scoped>
// 主体
.Main {
  display: flex;
  margin-top: 10rem;

  .MainLeft {
    width: 37.5%;
  }

  .MainRight {
    width: 60%;
    margin-left: 5rem;
  }
}


.MainH1 {
  font-size: 16px;
  margin-bottom: 5px;
}

.MainRightHeaderDiv {
  margin-bottom: 5rem;
  width: 96%;
}

// 物料编码输入框
.MainRightInput {
  width: 96%;
  display: flex;
  justify-content: right;
  margin-top: 10px;
}


// 右侧
.MainRightMain {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}

// 时间线
.timeline {
  display: flex;

  .timeline-dot {
    width: 63rem;
    height: 1px;
    background: #E7E7E7;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    margin-top: 10px;
  }

  .timelineH1 {
    margin-left: 5px;
    margin-right: 5px;
  }
}

.timelineMain {
  display: flex;
}

// input输入框的样式
.timelineMainInput {
  width: 45px;
  height: 25px;
}

.timelineMainH1 {
  text-align: center;
  margin-bottom: 7px;
}

.timelineMainP {
  margin-right: 5px;
}


.MainRightBottom {
  margin-top: 5rem;
}

.MainRightBottomBtn {
  margin-top: 7rem;
  float: right;
}

.MainLeftCard {
  margin-left: 5rem;
}
</style>
